/*
 * Copyright 2013 Google Inc.
 *
 *   Licensed under the Apache License, Version 2.0 (the "License");
 *   you may not use this file except in compliance with the License.
 *   You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 *   Unless required by applicable law or agreed to in writing, software
 *   distributed under the License is distributed on an "AS IS" BASIS,
 *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *   See the License for the specific language governing permissions and
 *   limitations under the License.
 *
 *   Author: Martin Gorner (mgorner@google.com)
 */
/*
CSS tranasition reference
	transition: [shorthand for the below, but only one CSS property can be in this list]
	transition-property: all [multiple CSS properties allowed, separated by commas]
	transition-duration: [example values: 1s 500ms]
	transition-timing-function: [default ease-in ease-out ease-in-out linear cubic-bezier]

example properties that can be animated
	left, right, top, bottom, margin, border, padding
	opacity
	transform: rotate, rotateX, rotateY, rotateZ, translateX, translateY, translateZ, scale, skew
	transform-style: preserve-3d, flat
*/
.movable
{
	position: absolute;
}

/*************************************/

#tile_bberry
{
	transition: 1000ms ease-out;
	transition-property: all;
	transform-style: preserve-3d;
	/*background-color: red;*/ /* uncomment to show background - makes understanding easier*/
	height: 270px; /* bad: chrome adds 4 stray pixels without this */
}
#tile_bberry.begin
{
	left: 520px;
	top: 410px;
	transform: scale(0.7) rotateY(0Deg) rotateX(0Deg) rotateZ(0Deg);
}
#tile_bberry.end
{
	left: -130px;
	top: -130px;
	transform: scale(0.7) rotateY(180Deg) rotateX(360Deg) rotateZ(180Deg);
}

#tile_bberry img
{
	position: relative;
	transform: TranslateZ(-150px);
}


/*************************************/

#tile_world
{
	left: 320px;
	top: 410px;
	transform: scale(0.7);
}
#tile_world.begin
{
	animation: skewanim2 1s cubic-bezier(0,0.5,0.3,1);
}
#tile_world.end
{
	left: -130px;
	top: -130px;
	animation: skewanim 1s cubic-bezier(0,0.5,0.3,1);
}

@keyframes skewanim
{
	from
	{
		left: 320px;
		top: 410px;
		transform: scale(0.7) skew(0Deg, 0Deg);
	}
	70%
	{
		left: -130px;
		top: -130px;
		transform: scale(0.7) skew(10Deg, 0Deg);
	}
	to
	{
		left: -130px;
		top: -130px;
		transform: scale(0.7) skew(0Deg, 0Deg);
	}
}

@keyframes skewanim2
{
	from
	{
		left: -130px;
		top: -130px;
		transform: scale(0.7) skew(0Deg, 0Deg);
	}
	70%
	{
		left: 320px;
		top: 410px;
		transform: scale(0.7) skew(-10Deg, 0Deg);
	}
	to
	{
		left: 320px;
		top: 410px;
		transform: scale(0.7) skew(0Deg, 0Deg);
	}
}

/*************************************/

#tile_computer
{
	left: 120px;
	top: 410px;
	transform: scale(0.7);
}
#tile_computer.begin
{
	animation: scaleanim2 1s;
}
#tile_computer.end
{
	left: -130px;
	top: -130px;
	animation-name: scaleanim;
    animation-duration: 1s;
    animation-iteration-count: 1; /* 2, 3, ... infinite */
    animation-timing-function: default; /* ease-in, ease-out, ...*/
    animation-direction: normal; /* normal, alternate */
    /*animation-delay: */
}
@keyframes scaleanim
{
	from
	{
		left: 120px;
		top: 410px;
		transform: scale(0.7);
	}
	50%
	{
		left: -130px;
		top: -130px;
		transform: scale(0.4);
	}
	to
	{
		left: -130px;
		top: -130px;
		transform: scale(0.7);
	}
}

@keyframes scaleanim2
{
	from
	{
		left: -130px;
		top: -130px;
		transform: scale(0.7);
	}
	50%
	{
		left: 120px;
		top: 410px;
		transform: scale(0.4);
	}
	to
	{
		left: 120px;
		top: 410px;
		transform: scale(0.7);
	}
}

/*************************************/

#tile_game
{
	transition: 1000ms ease-out;
	transition-property: all;
	transform-origin: 0 0;
}
#tile_game.begin
{
	left: 561px;
	top: 250px;
	transform: scale(0.7) rotate(0Deg);
}
#tile_game.end
{
	left: -89px;
	top: -89px;
	transform: scale(0.7) rotate(360Deg);
}

/*************************************/

#tile_phone
{
	transition: 1000ms ease-out;
	transition-property: all;
}
#tile_phone.begin
{
	left: 320px;
	top: 210px;
	transform: scale(0.7) rotateX(0Deg);
}
#tile_phone.end
{
	left: -130px;
	top: -130px;
	transform: scale(0.7) rotateX(360Deg);
}

/*************************************/

#tile_usb
{
	transition: 1000ms ease-out;
	transition-property: all;
}
#tile_usb.begin
{
	left: 120px;
	top: 210px;
	transform: scale(0.7) rotate(0Deg);
}
#tile_usb.end
{
	left: -130px;
	top: -130px;
	transform: scale(0.7) rotate(360Deg);
	
}
/*************************************/

#tile_browser
{
	transition: 1000ms ease-out;
	transition-property: all;
	transform: scale(0.7);
}
#tile_browser.begin
{
	left: 520px;
	top: 10px;
	opacity: 1;
}
#tile_browser.end
{
	left: -130px;
	top: -130px;
	opacity: 0.1;
}

/*************************************/

#tile_console
{
	transition: 1000ms cubic-bezier(0, 0.7, 1, 0.3);
	transition-property: all;
	transform: scale(0.7);
}
#tile_console.begin
{
	left: 320px;
	top: 10px;
}
#tile_console.end
{
	left: -130px;
	top: -130px;
}

/*************************************/

#tile_user
{
	transition: 500ms ease-out;
	transition-property: all;
	transform: scale(0.7);
}
#tile_user.begin
{
	left: 120px;
	top: 10px;
}
#tile_user.end
{
	left: -130px;
	top: -130px;
}

/*************************************/
/*        caption decorations        */
.caption
{
	position: absolute;
	padding: 30px;
	width: 140px;
	height: 140px;
	font-size: xx-large;
	text-align: center;
	font-style: normal;
	font-variant: small-caps;
	font-family: sans-serif;
	font-weight: 900;
	text-fill-color: #DDDDDD;
  	text-stroke-color: black;
  	text-stroke-width: 1.5px;
}
.title
{
	width: 800px;
	height: 50px;
	margin: 10px;
	text-align: left;
	font-size: 40px;
	transform-origin: 0% 0%;
	transform: rotate(90Deg);
	text-shadow: 2px 2px 2px rgb(130, 100, 100), -2px -2px 2px rgb(230,200,200), 2px -2px 2px rgb(200,230,200), -2px 2px 2px rgb(230,200,200);
}
